<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script>
        window.onload=function(){
            var app4 = new Vue({
                el:'#app-4',
                methods:{
                    add:function() {
                        this.todos.push({name: this.thing, done: false});
                    },
                    aa:function(index){
                        this.todos[index].done=!this.todos[index].done;
                    }
                },
                data:{
                    message:'Todo List',
                    thing:null,
                    todos:[
                        {name:'吃饭',done:false},
                        {name:'睡觉',done:false},
                        {name:'哈哈哈',done:true}
                    ]
                },
                data2:{
                   det:function () {
                        var count=0;
                        for(var i=0;i<this.todos.length;i++){

                            if(this.todos[i].done){
                                count++;
                            }
                        }
                        return  count;
                    }
                }
            });
        }
    </script>
    <style>
        .del{text-decoration:line-through}
    </style>
</head>
<body>
<div id="app-4">
    <h1>{{message}}</h1>
    <input type="text" v-model="thing" />
    <button v-on:click="add" v-on:keyup.enter="submit">添加</button>
    <div v-for="(todo,index) in todos">
        <input type="checkbox" v-bind:checked="todo.done" v-on:click="aa(index)"/>
        {{index}}.
        <span v-bind:class="{del:todo.done}">
        {{todo.name}}
        </span>
    </div>
    总共{{todos.length}}个项目,{{det}}个已完成,{{todos.length-det}}个未完成
</div>
</body>
</html>
